<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <button id="create">创建</button>
    <input type="number" onchange="setWidth()" id="inputWidth">
    <input type="number" onchange="setHeight()" id="inputHeight">
    <!-- <input type="number" onchange="setHeight()" id="borderWidth"> -->

    <!-- dom -->
    <div class="target" id="target"></div>
    <script>

        const create = document.getElementById('create')
        const target = document.getElementById('target')
        const inputWidth = document.getElementById('inputWidth')
        const inputHeight = document.getElementById('inputHeight')



        let box = [
            {
                w: 100,
                h: 100,
                bgcolor: 'red',
                /* 单例模式 */
                instance: undefined
            },
            {
                w: 100,
                h: 100,
                bgcolor: 'red',
                /* 单例模式 */
                instance: undefined
            },
        ]


        create.onclick = () => {
            render()
        }

        const render = () => {
            box.forEach(e => {
                let result = `<div class="box" style="width:${e.w}px;height:${e.h}px;background:${e.bgcolor}"></div>`
                target.innerHTML += result
                console.log(e.w);

                const btnTemp = document.getElementById(e.id)
            })
        }




    </script>
</body>

</html>